<template>
  <div>
    <el-button type="primary" @click="$emit('addCategories')">{{props.buttonName}}</el-button>
    <el-table :data="props.selectData"  style="width: 100%">
      <el-table-column type="expand" label="明细" width="80">
        <template #default="{row}">
          <el-tag :key="i" v-for="(item, i) in row.attr_vals" closable @close="">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index" width="80"/>
      <el-table-column :label="props.tableName" prop="attr_name" />
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" circle @click="$emit('EditHandle',row)">
            <el-icon>
              <Edit />
            </el-icon>
          </el-button>
          <el-button type="danger" circle @click="$emit('delHandle',row)">
            <el-icon>
              <Delete />
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="user.EditShow" title="Shipping address">
      <el-form>
        <el-form-item label="参数名称">
          <el-input v-model="user.EditName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('EditClose')">取消</el-button>
        <el-button type="primary" @click="$emit('EditSure')">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog v-model="user.addShow" title="Shipping address">
      <el-form>
        <el-form-item label="添加参数">
          <el-input v-model="user.addName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('addClose')">取消</el-button>
        <el-button type="primary" @click="$emit('addSure')">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted,ref} from "vue";
import { useShopStore } from "../store/index.js";
const props = defineProps(['buttonName', "tableName", "selectData", "EditShow", "EditName"])
const user = useShopStore();
onMounted(() => {
})
</script>

<style lang="scss" scoped>
:deep(.el-tag){
  padding: 8px;
  margin: 8px;
}
</style>